<template>
  <div class="want-index">
    <div class="want-navbar"></div>
    <div class="want-viewer">
      <div class="want-index-wrap">
        <div class="want-screen">
          <div class="want-bgimg"></div>
          <div class="screen-page">
            <div class="screen-idx-main">
              <div class="screen-cont-wrap">
                <div class="cont-wrap">
                  <div class="slogan-wrap">
                    <div class="slogan">
                      <div style="font-size:20px;color:#ffc83d;font-weight:bolder;">爱玖优行</div>
                      <div style="margin-top:10px;font-weight:700;font-size:26px">极致商务享你所享</div>
                    </div>
                  </div>
                  <div class="basebar-wrap">
                    <van-cell-group>
                      <van-field v-model="name" left-icon="user-o" label="用户名" placeholder="请输入用户名"/>
                      <van-field v-model="tel" left-icon="phone-o" label="手机号" placeholder="请输入手机号"/>
                      <van-field
                        v-model="car"
                        left-icon="like-o"
                        label="车型"
                        placeholder="请选择"
                        readonly
                        @focus="showPopup"
                        @blur="returnScroll"
                      />
                    </van-cell-group>
                    <div class="btn-wrap">
                      <div class="chose-btn" @click="addCustomer">确定</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-dialog v-model="show" lockScroll :showConfirmButton="false">
      <van-picker
        show-toolbar
        title="请选择"
        :columns="cartype"
        @cancel="onCancel"
        @confirm="onConfirm"
        value-key="name"
        visible-item-count="5"
      />
    </van-dialog>
    <!-- <tabbar></tabbar> -->
  </div>
</template>

<script>
import { Field, Icon, Picker, Popup, Toast, Dialog, Button } from 'vant';
import { addCustomer } from '../api';
import { CarMixin } from '../util/mixin.js';
export default {
  components: {
    [Field.name]: Field,
    [Icon.name]: Icon,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [Button.name]: Button,
  },
  mixins: [CarMixin],
  async created() {
    if (Object.keys(this.carinfo).length > 0) {
      this.cartype0 = this.carinfo.id;
      this.car = this.carinfo.cartype0;
    }
    await this.getCartype();
  },
  activated() {
    if (this.activeStatus !== 2) {
      this.setTabbarActive(2);
    }
  },
  data() {
    return {
      name: '',
      tel: '',
      car: '',
      cartype0: null,
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    onCancel() {
      this.show = false;
    },
    onConfirm(value, index) {
      this.car = value.name;
      this.cartype0 = value.id;
      this.show = false;
    },
    returnScroll() {
      document.body && (document.body.scrollTop = document.body.scrollTop);
    },
    addCustomer() {
      const phoneReg = /^[1]([3-9])[0-9]{9}$/;
      if (this.name === '') {
        this.$notify('请输入您的姓名！');
        return false;
      }
      if (this.tel === '') {
        this.$notify('请输入您的手机号！');
        return false;
      }
      if (!phoneReg.test(this.tel)) {
        this.$notify('手机号不正确！');
        return false;
      }
      if (this.car === '') {
        this.$notify('请选择您想租的车型！');
        return false;
      }
      const { name, tel, cartype0 } = this;
      addCustomer({ name, tel, cartype0 }).then(res => {
        if (res.data.state === '000') {
          this.car = '';
          this.cartype0 = '';
          this.name = '';
          this.tel = '';
          Toast.success('小爱会尽快联系您。');
        } else {
          Toast.fail(res.data.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" >
.want-index {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  overflow: hidden;
  background-color: #0f0f0f;
  .want-navbar {
    position: absolute;
  }
  .want-viewer {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    height: 100%;
    > div {
      height: 100%;
    }
    .want-screen {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      .want-bgimg {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url('../assets/img/yindex-top-min.jpg');
        // background-image: url('../assets/img/ren-car-index.jpg');
        background-position: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 0;
      }
      .screen-page {
        position: relative;
        width: 100%;
        height: 100%;
        color: #fff;
        text-align: left;
        .screen-idx-main {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          padding: 10px 0.5rem 0 0.5rem;
          position: relative;
          width: 100%;
          height: 100%;
          .screen-cont-wrap {
            position: relative;
            height: 100%;
            width: 100%;
            .cont-wrap {
              display: -webkit-box;
              display: flex;
              -webkit-box-orient: vertical;
              -webkit-box-direction: normal;
              position: relative;
              height: 100%;
              max-width: 600px;
              margin: 0 auto;
              flex-flow: column nowrap;
              -webkit-box-pack: end;
              justify-content: flex-end;
              width: 100%;
              .slogan-wrap {
                -webkit-box-flex: 1;
                flex: 1;
                margin-top: 15px;
                padding-top: 15vh;
                letter-spacing: 0.1em;
                flex-flow: column nowrap;
                -webkit-box-pack: start;
                justify-content: flex-start;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
              }
              .basebar-wrap {
                width: 100%;
                height: 100%;
                position: absolute;
                margin: 0 auto;
                top: 40%;
                font-size: 18px;
                .btn-wrap {
                  width: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin-top: 15px;
                  .chose-btn {
                    height: 44px;
                    width: 50%;
                    background-color: rgba(119,91,63, 0.7);
                    border-radius: 22px;
                    color: #ffffff;
                    line-height: 44px;
                    text-align: center;
                    font-size: 18px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.chose-car-title {
  text-align: left;
}
.van-cell {
  background-color: transparent;
  color: #ffffff;
}
.van-field__control {
  color: #ffc83d;
}
</style>
